<template>
    <div class="layout-process">

        <div class="layout-process-content">
            <ul>
                <li :class="{ active: activePiece.type == 1 }" @click="setProcess(1)">
                    <svg-icon name="design-dtg" :class="{ primary: dtgPrice }" />
                    <CommonCurrencyRate :price="dtgPrice" type="pre|unit|price" :other="{ pre: '+' }" v-if="dtgPrice" />
                    <span v-else>DTG printing</span>
                </li>
                <li :class="{ active: activePiece.type == 2 }" @click="setProcess(2)">
                    <svg-icon name="design-emb" :class="{ primary: embPrice }" />
                    <CommonCurrencyRate :price="embPrice" type="pre|unit|price" :other="{ pre: '+' }" v-if="embPrice" />
                    <span v-else>Embroidery</span>
                </li>
            </ul>

            <div class="layout-process-multi" v-if="multiPrice">
                <span>Multi-process fee </span>
                <CommonCurrencyRate :price="299" type="pre|unit|price" :other="{ pre: '+' }" />
            </div>

        </div>


        <UxDialog :visible="!!dialog" @close="dialog = null">

            <div class="dialog-notify">
                <figure>
                    <img src="@/assets/images/designer/dialog-custom-maximum.png" alt="">
                </figure>
                <p>
                    <strong>A custom layer is already added. Embroidery cannot be added.</strong>
                </p>

                <fieldset>
                    <button @click="dialog = null" type="primary">OK</button>
                </fieldset>
            </div>
        </UxDialog>

    </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
    props: {
        spu: { type: String, default: '' },
    },
    data () {
        return {
            show: true,
            open: null, // 打开
            dialog: false,
        };
    },
    computed: {
        ...mapGetters("designer", {
            pieces: "getPieces",
            models: "getModels",
            activePiece: "getActivePiece",
            activeModel: "getActiveModel",
            activeModelTag: "getActiveModelTag",
            piecesPrice: 'getPiecesPrice',
            customizeList: 'getPiecesCustomize',
        }),

        dtgPrice () {
            return this.piecesPrice.filter(i => i.piece.type == 1).reduce((pre, cur) => pre + cur.value, 0)
        },
        embPrice () {
            return this.piecesPrice.filter(i => i.piece.type == 2).reduce((pre, cur) => pre + cur.value, 0)
        },

        multiPrice () {

            const types = new Map(this.piecesPrice.map(i => [i.piece.type || 1, true]))
            if (types.size > 1) {
                return 1599
            } else {
                return 0
            }
        }
    },

    methods: {

        // 选中设计区
        setActivePiece (item) {
            let models = this.models;
            let activeModel = models.find((model) => model.surface_name == item.surface_name && model.model_tag == this.activeModelTag);

            if (activeModel && this.activeModel != activeModel) {
                this.$store.commit("designer/SET_ACTIVE_MODEL", activeModel);
            }

            // 滚动到指定位置
            item && this.$store.commit("designer/SET_ACTIVE_PIECE", item);

            if (item && item.type == 2) {
                // 刺绣选中绣框
                this.$store.commit("designer/SET_ACTIVE_LAYER", item.layers[0]);
            } else {
                this.$store.commit("designer/SET_ACTIVE_LAYER", null);
            }
        },

        // 选中线框图
        setProcess (type) {
            // 切换到同个面
            if (this.activePiece.type == type) return; // 相同时不处理


            if (type == 2 && this.customizeList.length > 0) {
                this.dialog = true;
                return
            }

            const types = this.pieces.filter(i => i.type == type)
            const used = types.find(i => i.layers.length > 0)
            const same = types.find(i => this.activePiece.surface_name == i.surface_name)

            if (used || same) {
                this.setActivePiece(used || same)
            } else if (types.length > 0) {
                this.setActivePiece(types[0])
            }
        }
    },

};
</script>
<style lang="scss" scoped>
.layout-process {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 62px;
    border-bottom: 1px solid #e6e6e6;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    .layout-process-content {
        position: relative;
    }

    .layout-process-multi {
        position: absolute;
        left: 100%;
        margin-left: 12px;
        top: 50%;
        transform: translateY(-50%);
        white-space: nowrap;
        font-family: Roboto-Regular, Roboto;
        font-weight: 400;
        font-size: 14px;
        color: #292929;
    }

    ul {
        background: #f0f0f0;
        display: flex;
        border-radius: 8px;
        padding: 2px;
    }

    li {
        height: 36px;
        line-height: 34px;
        padding: 0 12px;
        border-radius: 4px;
        cursor: pointer;
        display: flex;
        align-items: center;
        border: 1px solid transparent;
        box-sizing: border-box;
        padding: 0 15px;
        font-family: Roboto-Medium;
        font-weight: 500;
        font-size: 16px;
        color: #555555;
        border-radius: 6px;

        &+li {
            margin-left: 2px;
        }

        svg {
            width: 16px;
            height: 16px;
            margin-right: 3px;
            opacity: 0.7;

            &.primary {
                color: #ea4c89;
                opacity: 0.7;
            }
        }

        &:hover {
            background-color: #fff;
            color: #000;

            svg {
                opacity: 1;
            }
        }

        &.active {
            background-color: #fff;
            border-color: #707070;
            color: #000;

            svg {
                opacity: 1;
            }
        }
    }
}


.dialog-notify {
    width: 320px;
    height: 414px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 56px 14px 14px;

    figure {
        width: 80px;
        height: 80px;

        img,
        svg {
            width: 100%;
            height: 100%;
        }
    }

    p {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        margin-bottom: 52px;


        strong {
            font-size: 16px;
            font-family: Roboto-Regular, Roboto;
            font-weight: 400;
            color: #000000;
            line-height: 22px;
        }

        span {
            margin-top: 10px;
            font-size: 14px;
            font-family: Roboto-Regular, Roboto;
            font-weight: 400;
            color: #000000;
            line-height: 22px;
        }
    }

    fieldset {
        display: flex;
        flex-direction: column;
        width: 100%;

        button {
            height: 38px;
        }

        button+button {
            margin-top: 8px;
        }
    }
}
</style>
